<template>
  <a-card class="edgex-detail-card" :title="name">
    <template #extra>
      <EdgexTag />
    </template>
    <div class="grid justify-between grid-cols-8">
      <div class="flex flex-col col-span-6 gap-2 pr-2">
        <div>
          <a-tag class="inline-block id">{{ id }}</a-tag>
        </div>
        <p>描述：{{ description }}</p>
        <p>前缀：{{ prefix }}</p>
        <p>后缀：{{ extra }}</p>
        <p>创建时间：{{ created_time }}</p>
        <div class="flex info">
          <a-tag color="#3b5999" class="flex items-center p-1">
            <IconFont type="icon-ip" style="font-size: 1.5rem" />
            {{ address }}
          </a-tag>
          <a-tag color="#9266f9" class="flex items-center p-1">
            <IconFont type="icon-location" style="font-size: 1.5rem" />
            {{ location }}
          </a-tag>
        </div>
      </div>

      <div
        class="flex flex-col items-end justify-between col-span-1 col-start-8 gap-2 text-2xl"
      >
        <div class="flex items-start col-span-1 gap-2 status">
          <a-tag color="blue" class="h-8 leading-8" v-if="status === '可用'">{{
            status
          }}</a-tag>
          <a-tag color="red" class="h-8 leading-8" v-else>{{ status }}</a-tag>
          <a-tag color="green" class="flex items-center h-8 p-1 leading-8">
            <UserOutlined />
            {{ creator_id }} - {{ creator_name }}
          </a-tag>
        </div>
        <StarTwoTone
          class="cursor-pointer svg-scale"
          @click="unfollow"
          twoToneColor="orange"
          v-if="followed"
        />
        <StarTwoTone @click="follow" class="cursor-pointer svg-scale" v-else />
        <div class="flex gap-2 operations">
          <ModifyEdgexModal :edgex="edgex" />
          <DeleteConfirm />
        </div>
      </div>
    </div>
  </a-card>
</template>

<script lang="ts">
import { computed, defineComponent, inject, PropType, reactive } from "vue";
import EdgexTag from "../tags/EdgexTag.vue";
import { StarTwoTone, UserOutlined } from "@ant-design/icons-vue";
import { Edgex } from "model";
import IconFont from "@/components/Icons";
import DeleteConfirm from "../confirm/DeleteConfirm.vue";
import ModifyEdgexModal from "../modals/ModifyEdgexModal.vue";
import { Status } from "@/@types/enum";
import { followEdgex, unfollowEdgex } from "@/controller/Edgex";

export default defineComponent({
  name: "EdgexDetailCard",
  components: {
    EdgexTag,
    StarTwoTone,
    IconFont,
    UserOutlined,
    DeleteConfirm,
    ModifyEdgexModal,
  },
  props: {
    edgex: {
      type: Object as PropType<Edgex>,
      required: true,
    },
  },
  setup(props) {
    const refresh: Function = inject("refresh") ?? new Function();
    const edgex = reactive(props.edgex);
    const description = computed(() => edgex.description);
    const prefix = computed(() => edgex.prefix);
    const created_time = computed(() => edgex.created_time);
    const id = computed(() => edgex.edgex_id);
    const status = computed(() =>
      edgex.status === Status.ENABLED ? "可用" : "不可用"
    );
    const name = computed(() => edgex.edgex_name);
    const address = computed(() => edgex.address);
    const location = computed(() => {
      const location = JSON.parse(edgex.location);
      const ans = location.province + " - " + location.city;
      return ans;
    });
    const extra = computed(() => edgex.extra);
    const followed = computed(() => edgex.is_follow);
    const creator_id = computed(() => edgex.user_id);
    const creator_name = computed(() => edgex.username);
    const follow = async () => {
      await followEdgex(id.value, name.value);
      refresh();
    };
    const unfollow = async () => {
      await unfollowEdgex(id.value);
      refresh();
    };
    return {
      description,
      prefix,
      created_time,
      id,
      status,
      name,
      address,
      location,
      extra,
      followed,
      creator_id,
      creator_name,
      follow,
      unfollow,
    };
  },
});
</script>

<style lang="scss">
.edgex-detail-card {
  .info .ant-card {
    svg {
      font-size: 2rem;
    }
  }
}
</style>
